<template>
<view >
	<view class="input-container">
	  <view class="input-content flex">
	    <image :src="IMG_URL+'search-icon1.png'" class='search-image'></image>
	    <input class="input-text input-pl" placeholder="请输入搜索关键词" placeholder-class="input-pl" confirm-type='search' type="text" @confirm='inputConfirm'></input>
	  </view>
	</view>
	
	<scroll-view class="list-scroll" scroll-y @scrolltolower='handleScrollBottomGetMoreListInfo'>
		
		<view class="order-list" v-for="(order,index) in order_list" v-for-item="order"  @tap="handleClickToOrderDetailPage" :data-id="order.order_id">
			
			<navigator  hover-class="none">
				
			  <!-- 订单号及状态 -->
			  <view class="order-title flex-between">
				<view class="order-title-text flex">
				  <image :src="IMG_URL+'order-icon.png'" mode='widthFix'></image>
				  <text>预算编号：{{order.order_no}}</text>
				</view>
				<!-- <view class="order-title-status" wx:if="{{navNum==1}}">待支付</view> -->
				 <view class="order-title-status" v-if="navNum==1">{{order.nickName}}</view>
				<view class="order-title-status" v-else-if="navNum==2">待发货</view>
				<view class="order-title-status" v-else-if="navNum==3">待收货</view>
				<view class="order-title-status" v-else-if="navNum==4">待评价</view>
				<view class="order-title-status" v-else-if="navNum==5">售后</view>
			  </view>
			  
			  
			  <!-- 商品列表 -->
			        <view class="goods-list flex-between" v-for='(goods,index) in order.goods_list' v-key='index' >
			          <view class="goods-image flex-center">
			            <image :src='goods.goods_pic' mode='aspectFit'></image>
			          </view>
			          <view class="goods-detail col-between">
			            <view class="goods-name text-sl">{{goods.goods_name}}</view>
			            <view class="goods-price flex-between">
			              <view class="goods-price-text" v-for="(attr,index) in goods.attr_list" >{{attr.attr_group_name}}: {{attr.attr_name}}</view>
			              <view class="goods-price-num">
			                <text>￥</text>
			                <text>{{goods.price}}</text>
			              </view>
			            </view>
			          </view>
			        </view>
					
					<view class="order-total flex-end">
						  <view style='margin-right:auto;font-size:24rpx;'>发起时间: <text style='color:red'>{{order.addtime}}</text></view>
						  <view v-if='navNum==1||navNum==2'>
							   <view v-if="order.is_send==0" class='flex'>
								     <view class="order-btn order-btn-red mgr-22" :data-id="order.order_id" :data-index="index" @click.stop="orderEdit">
									  修改预算
									  </view>
										 <view class="order-btn" @click.stop="orderRevoke" :data-id="order.order_id">
									  取消预算
									   </view>
							   </view>
						  </view>
					</view>
					
					
					
			</navigator>
		
		</view>
	</scroll-view>
	

</view>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	var t = require("@/api.js"), a = !1, o = !1,s=2,me = require("@/utils/method.js");
	var e= getApp(),ea=getApp();
	export default {
		data(){
			return{
				IMG_URL:'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/',
				 navNum: 1, //当前选中的导航栏
				    showPayWayModal: false, //是否显示支付方式弹窗
				    payWay: 0, //当前支付方式 1为微信支付，2为余额支付
				
				    /*后端所需参数 */
				    goodsList: [{
				      id: 1,
				      text: '蒂佳婷药丸面膜蓝色胶囊绿色舒缓滋润保湿补水面膜蒂佳婷药丸面膜蓝色胶囊绿色',
				      img: 'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-list1.png'
				    }, {
				      id: 2,
				      text: '韩国OSE澳皙可五色黄土面膜吸附清洁', 
				      img:'http://try11.jiaodaoren.com/zhusiyao/zhenyangyou/cart-list2.png'
				    }], //商品列表
				    /*后端需要用到的参数 */
				    status: -1,
				    order_list: [],
				    show_no_data_tip: !1,
				    hide: 1,
				    qrcode: "",
				    order_id: "",
				    page: 1,
				    limit: 5,
				    row_count: 0
			}
		},
		onLoad:function(){
			let navNum = t.navNum
			this.navNum=navNum;
			var n = this;
			a = !1, o = !1, s = 2, n.loadOrderList(t.status || -1), getCurrentPages().length < 2; n.show_index= !0;
		},
		methods:{
			  //滚动触底，获取更多列表数据
			  handleScrollBottomGetMoreListInfo() {
			    let self = this;
			    if (self.order_list.length >= self.row_count) {
			      me.urlToast('没有更多了~', 0, 1000, 0);
			      return;
			    }
			    this.page++;
			    this.loadOrderList(this.status, self.page);
			  },
			/*取消订单*/
			orderRevoke: function (a) {
				  var arr = this.main_getGlobal(); 
				  console.log('arr',arr);
			    var o = this;
			    uni.showModal({
			      title: "提示",
			      content: "是否取消该预算？",
			      cancelText: "否",
			      confirmText: "是",
			      success: function (s) {
					
			        if (s.cancel) return !0;
			        s.confirm && (uni.showLoading({
			          title: "操作中"
			        }), uni.request({
			          url: t.order.revoke,
			          data: {
			            order_id: a.currentTarget.dataset.id,
						mobile:arr.token,
						type:arr.type
			          },
			          success: function (ta) {
			            uni.hideLoading(), uni.showModal({
			              title: "提示",
			              content: ta.msg,
			              showCancel: !1, 
			              success: function (taa) {
			                taa.confirm && o.loadOrderList(o.data.status);
			              }
			            });
			          }
			        }));
			      }
			    });
			  },
			 //跳转到订单详情页
			  handleClickToOrderDetailPage(e) {
			    let id = e.currentTarget.dataset.id;
			    uni.navigateTo({
			      url: '/pages/order-detail/order-detail?id=' + id,
			    })
			},
			/*加载数据 */
			  loadOrderList: function (a, page = 0,nickname='') {
			    void 0 == a && (a = -1);
			    var o = this;
			    var order_list = o.order_list;
			    o.status= a;
				let arr = this.main_getGlobal();
				 uni.showLoading({
			      title: "正在加载",
			      mask: !0
			    }), uni.request({
			      url: t.order.other_list,
			      data: {
			        status: o.status,
			        page: o.page,
			        limit: o.limit,
			        nickname,
					mobile:arr.token,
					type:arr.type
			      },
			      success: function (t) {
					  t=t.data;
					  console.log('t的值',t);
			        if (0 == t.code) {
			          if (page == 0) {
			            o.order_list= t.data.list;
			          } else {
			            o.order_list=order_list.concat(t.data.list);
			          }
			          o.pay_type_list=t.data.pay_type_list;
			          o.row_count= t.data.row_count;
			        }
			        uni.getStorageSync("item"); uni.removeStorageSync("item"); 
					o.show_no_data_tip=0 == o.order_list.length;
			    
			      },
			      complete: function () {
			        uni.hideLoading();
			      }
			    });
			  },
		},
	}
</script>

<style>
	/* pages/order_list/order_list.wxss */
	
	page {
	  background: #f6f7f8;
	  font-family: "Microsoft YaHei";
	  font-size: 24rpx;
	  box-sizing: border-box;
	}
	
	/* 导航栏 */
	
	.nav-container {
	  height: 90rpx;
	  display: grid;
	  grid-template-columns: repeat(5, 1fr);
	  background: rgba(255, 255, 255, 1);
	  position: fixed;
	  left: 0;
	  right: 0;
	  top: 0;
	}
	.mgr-22{
	  margin-right:22rpx;
	}
	
	.nav-list {
	  text-align: center;
	  font-size: 28prx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	  line-height: 90rpx;
	  height: 90rpx;
	  position: relative;
	}
	
	.selected-nav {
	  color: rgba(236, 28, 36, 1);
	}
	
	.selected-nav::after {
	  content: '';
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  bottom: 0;
	  width: 54rpx;
	  height: 4rpx;
	  background: linear-gradient(0deg, rgba(255, 81, 51, 1), rgba(248, 40, 37, 1));
	}
	
	/* 商品列表 */
	
	.list-scroll {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  /* top: 90rpx; */
	  /* top: 5rpx; */
	  top: 100rpx;
	}
	
	.order-list {
	  background: rgba(255, 255, 255, 1);
	  margin: 20rpx auto 0;
	  padding: 0 28rpx;
	}
	
	.order-list:nth-last-of-type(1) {
	  margin-bottom: 50rpx;
	}
	
	.order-title {
	  padding: 30rpx 0;
	}
	
	.order-title-text image {
	  width: 24rpx;
	  height: 25rpx;
	  margin-right: 14rpx;
	}
	
	.order-title text {
	  font-size: 28rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.order-title-status {
	  font-size: 28rpx;
	  color: rgba(236, 28, 36, 1);
	}
	
	/* 商品列表 */
	
	.goods-list {
	  padding-bottom: 20rpx;
	}
	
	.goods-image {
	  width: 164rpx;
	  height: 138rpx;
	  border-radius: 6rpx;
	}
	
	.goods-image image {
	  max-height: 100%;
	}
	
	.goods-detail {
	  flex: 1;
	  height: 138rpx;
	  padding: 4rpx 0 4rpx 26rpx;
	}
	
	.goods-name {
	  height: 80rpx;
	  line-height: 40rpx;
	  font-size: 30rpx;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}
	
	.goods-price-text {
	  font-size: 22rpx;
	  color: rgba(153, 153, 153, 1);
	}
	
	.goods-price-num text:nth-of-type(1) {
	  font-size: 22rpx;
	  color: #333;
	}
	
	.goods-price-num text:nth-of-type(2) {
	  font-size: 30rpx;
	  color: #333;
	}
	
	.order-total {
	  padding: 30rpx 0;
	}
	
	.order-btn {
	  font-size:24rpx;
	  width: 138rpx;
	  height: 56rpx;
	  background: rgba(255, 255, 255, 1);
	  border: 1rpx solid rgba(199, 199, 199, 1);
	  border-radius: 28rpx;
	  text-align: center;
	  line-height: 54rpx;
	}
	
	/* .order-btn:nth-last-of-type(1) {
	  margin-left: 22rpx;
	  border: 1rpx solid rgba(236, 28, 36, 1);
	  color: rgba(236, 28, 36, 1);
	}
	
	.order-btn:nth-last-of-type(2) {
	  border: 1rpx solid rgba(220, 220, 220, 1);
	  color: rgba(102, 102, 102, 1);
	} */
	
	.order-btn-red{
	 
	  border: 1rpx solid rgba(236, 28, 36, 1);
	  color: rgba(236, 28, 36, 1);
	}
	.order-btn-gray{
	  border: 1rpx solid rgba(220, 220, 220, 1);
	  color: rgba(102, 102, 102, 1);
	}
	.mgl-22{
	   margin-left: 22rpx;
	}
	
	/* 支付方式弹窗 */
	
	.van-popup {
	  background: rgba(0, 0, 0, 0) !important;
	}
	
	.pay-container {
	  width: 610rpx;
	  background: rgba(255, 255, 255, 1);
	  border-radius: 10rpx;
	  overflow: hidden;
	}
	
	.pay-title {
	  text-align: center;
	  height: 88rpx;
	  line-height: 88rpx;
	  font-size: 30rpx;
	  color: rgba(0, 0, 0, 1);
	}
	
	.pay-list {
	  height: 86rpx;
	  padding: 0 52rpx 0 26rpx;
	  border-top: 1rpx solid #f2f2f2;
	}
	
	.pay-list-title image {
	  width: 40rpx;
	  height: 40rpx;
	  margin-right: 20rpx;
	}
	
	.pay-list-title text {
	  font-size: 30rpx;
	  color: rgba(51, 51, 51, 1);
	}
	
	.pay-list-image {
	  width: 28rpx;
	  height: 28rpx;
	}
	page {
	background-color: #fff;
	font-family: "Microsoft YaHei";
	font-size: 24rpx;
	box-sizing: border-box;
	
	}
	/*搜索框样式*/
	/*俏美样式开始*/
	.input-container {
	  height: 106rpx;
	  display: flex;
	  align-items: center;
	  position: relative;
	}
	
	.input-content {
	  width: 690rpx;
	  height: 70rpx;
	  background: rgba(247, 247, 249, 1);
	  border-radius: 35rpx;
	  margin: 0 auto;
	  padding: 0 40rpx;
	}
	
	.input-text {
	  flex: 1;
	  padding-left: 18rpx;
	}
	
	.input-pl {
	  font-size: 26rpx;
	  color: rgba(178, 178, 178, 1);
	}
	
	.search-image {
	  width: 26rpx;
	  height: 26rpx;
	}
	/*新增*/
	.flex-between {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	.flex-end {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	}
	.flex {
	    display: flex;
	    align-items: center;
	}
</style>
